<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="1100px"
  >
    <template #searchPanel>
      <!-- financeTitle="退出预约看板" :showFinanceButton="true" -->
      <search-panel
        :showAddButton="true"
        :showSendButton="true"
        :showSearchButton="false"
        @insert="fullScreen"
        addTitle="全屏展示"
        sendButtonTitle="看板设置"
        @send="send"
        :addPer="'admin'"
        :financePer="'admin'"
      >
      </search-panel>
    </template>
    <template #contentPanel>
      <div
        id="content"
        class="main"
      >
        <div class="title">
          {{dataTime}}
        </div>
        <div class="head">
          <el-table
            :data="renderData"
            border
            :header-row-class-name="headerClass"
            :row-class-name="rowClass"
            style="width:100vw"
          >
            <el-table-column
              v-for="(item,index) in colum"
              :key="index"
              :label="item.name"
              align="center"
            >
              <template slot-scope="scope">
                <div :style="item.color?'color:'+item.color:''">{{scope.row[`${item.value}`]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <template #dialog>
      <KanbanSetting
        :option="option"
        @close="dialogClose"
      />
    </template>
  </base-layout>
</template>
<script>
import screenfull from 'screenfull'
import BaseLayout from '@/views/layout/Base'
import SearchPanel from '@/components/SearchPanel'
import moment from 'moment';
import KanbanSetting from '@/components/Kanban/kanbanSetting';
import settingData from '@/components/Kanban/settingConfig';
import data from '@/views/svg-icons/generateIconsView';
export default {
  components: {
    BaseLayout,
    SearchPanel,
    KanbanSetting,
  },
  props: {
    colum: {
      type: Array,
      requird: true,
      default: () => { return [] }
    },
    data: {
      type: Array,
      default: () => { return [] }
    },
    //参考当前目录下settingConfig 导出的key
    type: {
      type: String,
    },
    maxRow: {
      default: () => { return 10 }
    }
  },
  computed: {
    option () {
      return settingData[this.type]
    },
  },
  watch: {
    data: {
      deep: true,
      handler (nv, ov) {
        this.renderDataEv(nv);
      }
    }
  },
  data () {
    return {
      dialogTitle: '看板设置',
      dialogVisible: false,
      dataTime: '',
      intervalHander: '',//定时句柄
      renderData: [],
    }
  },
  methods: {
    renderDataEv (data) {
      if (data.length <= 0) {
        return
      }
      let rowCout = parseInt(this.maxRow);
      let dataSource = Object.assign([], data);
      this.renderData = dataSource.splice(0, rowCout)
    },
    //看板设置
    send () {
      this.dialogVisible = true;
    },
    headerClass ({ row, rowIndex }) {
      return "headerClass"
    },
    rowClass ({ row, rowIndex }) {
      return "rowClass"
    },
    //全屏
    fullScreen () {
      if (!screenfull.enabled) {
        this.$message({
          message: '你的浏览器不支持全屏展示',
          type: 'warning'
        })
        return false
      }
      let el = document.getElementById("content")
      screenfull.request(el);
    },
    dialogClose () {
      this.dialogVisible = false;
    }
  },
  created () {
    this.intervalHander = setInterval(() => {
      let s = moment().seconds();
      this.dataTime = `${moment().format('llll')}:${`${s}`.length == 1 ? `0${s}` : s}`;
    }, 1000);

  },
  destroyed () {
    window.clearInterval(this.intervalHander)
  }

}
</script>
<style lang="scss" scoped>
/deep/ .el-table .headerClass {
  width: 100vw;
  display: flex;
}
/deep/ .el-table .headerClass th {
  background-color: #114b66;
  color: #fff;
  flex: 1;
}
/deep/ .el-table .rowClass {
  width: 100vw;
  display: flex;
}
/deep/ .el-table .rowClass td {
  background-color: #131313;
  color: #fff;
  flex: 1;
}
.title {
  text-align: center;
  font-size: x-large;
  background-color: #00a1ec;
  color: #fff;
  height: 60px;
  line-height: 60px;
}
</style>